<script setup>
import { onMounted, watch } from 'vue'
import { reactive, ref } from 'vue'
import dayjs from 'dayjs'
import { agencyListAPI } from '@/services/courier'
const formRef = ref()

// 表单数据
const formState = reactive({
  /** 取件任务编号 */
  id: undefined,
  /** 订单编号 */
  orderId: undefined,
  /** 所属营业部 */
  agencyId: undefined,
  /** 预计完成时间 */
  EstimatedEndTime: [],
  maxEstimatedEndTime: undefined, // 最大
  minEstimatedEndTime: undefined, // 最小
  /** 实际完成时间 */
  ActualEndTime: [],
  maxActualEndTime: undefined, // 最大
  minActualEndTime: undefined, // 最小
  /** 任务分配状态 */
  assignedStatus: undefined,
})

defineProps({
  /** 页码 */
  page: {
    type: Number,
    default: 1,
  },
  /** 页容量 */
  pageSize: {
    type: Number,
    default: 10,
  },
})

const emit = defineEmits(['init', 'finish', 'reset', 'update:page', 'update:pageSize'])
// 点击搜索按钮
const onFinish = async () => {
  // 重置页码
  emit('update:page', 1)
  // 重新获取数据
  emit('finish', formState)
}

// 表单初始化
onMounted(() => {
  emit('init', formState)
})

// 重置表单
const onReset = async () => {
  // 重置页码和页容量
  emit('update:page', 1)
  emit('update:pageSize', 10)
  // 重置表单后，重新获取数据
  await formRef.value.resetFields()
  emit('reset', formState)
}

// 树形机构信息
const treeData = ref([])
const getTreeData = async () => {
  const res = await agencyListAPI()

  // 递归写法处理成组件所需的树形结构
  function mapChildren({ name, id, children }) {
    const item = { label: name, value: id }
    if (children) {
      item.children = children.map(mapChildren)
    }
    return item
  }
  // 保存树形结构数据用于组件展示
  treeData.value = JSON.parse(res.data).map(mapChildren)
}

// 监听回车时间组件的值变化，处理成后端所需的参数格式
// 实际时间
watch(
  () => formState.ActualEndTime,
  (value) => {
    formState.minActualEndTime = value[0]?.format('YYYY-MM-DD HH:mm:ss')
    formState.maxActualEndTime = value[1]?.format('YYYY-MM-DD HH:mm:ss')
  },
)
// 预计时间
watch(
  () => formState.EstimatedEndTime,
  (value) => {
    formState.minEstimatedEndTime = value[0]?.format('YYYY-MM-DD HH:mm:ss')
    formState.maxEstimatedEndTime = value[1]?.format('YYYY-MM-DD HH:mm:ss')
  },
)
// 预设时间范围
const rangePresets = ref([
  { label: '最近 7 天', value: [dayjs().add(-7, 'd'), dayjs()] },
  { label: '最近 14 天', value: [dayjs().add(-14, 'd'), dayjs()] },
  { label: '最近 30 天', value: [dayjs().add(-30, 'd'), dayjs()] },
  { label: '最近 90 天', value: [dayjs().add(-90, 'd'), dayjs()] },
])
onMounted(() => {
  getTreeData()
})
</script>

<template>
  <a-form ref="formRef" :model="formState" @finish="onFinish">
    <a-row :gutter="24">
      <a-col :span="8">
        <a-form-item label="取件任务编号" :name="'id'">
          <a-input
            allow-clear
            v-model:value="formState.id"
            placeholder="请输入取件任务编号"
          ></a-input>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="订单编号" :name="'orderId'">
          <a-input
            allow-clear
            v-model:value="formState.orderId"
            placeholder="请输入订单编号"
          ></a-input>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :name="'agencyId'" :label="'所属营业部'">
          <a-tree-select
            v-model:value="formState.agencyId"
            :tree-data="treeData"
            placeholder="请选择所属营业部"
            show-search
            allow-clear
            tree-default-expand-all
            tree-node-filter-prop="label"
          />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :name="'EstimatedEndTime'" :label="'预计完成时间'">
          <a-range-picker
            v-model:value="formState.EstimatedEndTime"
            allow-clear
            show-time
            format="YYYY-MM-DD HH:mm:ss"
            :presets="rangePresets"
          />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :name="'ActualEndTime'" :label="'实际完成时间'">
          <a-range-picker
            v-model:value="formState.ActualEndTime"
            allow-clear
            show-time
            format="YYYY-MM-DD HH:mm:ss"
            :presets="rangePresets"
          />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :name="'assignedStatus'" :label="'任务分配状态'">
          <a-select v-model:value="formState.assignedStatus" placeholder="请选择任务分配状态">
            <a-select-option value="2">已分配</a-select-option>
            <a-select-option value="3">待人工分配</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-space>
          <a-button type="primary" html-type="submit">搜索</a-button>
          <a-button @click="onReset">重置</a-button>
        </a-space>
      </a-col>
    </a-row>
  </a-form>
</template>
